<template>
  <div class="app-container">
    <!--列表区-->
    <el-table
      :data="list"
      v-loading.body="listLoading"
      element-loading-text="Loading"
      fit
      highlight-current-row
      row-class-name="ele-table-row"
    >
      <el-table-column align="center" label='序号' width="60">
        <template slot-scope="scope">
          {{scope.$index + 1 + (page.page-1) * page.per_page}}
        </template>
      </el-table-column>
      <el-table-column label="类型" min-width="60">
        <template slot-scope="scope">
          {{scope.row.type | goldTypeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="110" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column label="试用数量" min-width="70">
        <template slot-scope="scope">
          {{scope.row.number_of}}
        </template>
      </el-table-column>
      <el-table-column label="商品价格" min-width="70">
        <template slot-scope="scope">
          {{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column label="奖励金币" min-width="70">
        <template slot-scope="scope">
          {{scope.row.to_golds}}
        </template>
      </el-table-column>
      <el-table-column label="消费金币" min-width="70">
        <template slot-scope="scope">
          {{scope.row.golds}}
        </template>
      </el-table-column>
      <el-table-column label="余额" min-width="90">
        <template slot-scope="scope">
          {{scope.row.result_golds}}
        </template>
      </el-table-column>
      <el-table-column label="操作时间" min-width="160">
        <template slot-scope="scope">
          {{scope.row.created_at}}
        </template>
      </el-table-column>
      <el-table-column label="流水号" min-width="120">
        <template slot-scope="scope">
          {{scope.row.serial_no}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="page.total"
      style="float:right;margin: 15px 100px">
    </el-pagination>
  </div>
</template>

<script>
  import { finance_getConsumeReport } from '../../../api/index'

  export default {
    components: {
    },
    data() {
      return {
        list: [],
        listLoading: false,
        page: {
          page: 1,
          per_page: 10,
          total: 0,
          data: [],
          current_page: 1,
          in_out: 1 // 消费
        }
      }
    },
    methods: {
      // 获取列表信息
      getList() {
        this.listLoading = true
        finance_getConsumeReport(this.page).then(res => {
          console.log(res)
          this.list = res.data.data
          this.initPage(res.data)
          this.listLoading = false
        })
      },
      initPage(data) {
        this.page.page = data.current_page
        this.page.total = data.total
        this.page.per_page = data.per_page
      },
      handleCurrentChange(currentPage) {
        this.page.page = currentPage
        this.getList()
      }
    },
    mounted() {
      // 获取数据
      this.getList()
    }
  }
</script>
